<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园失物招领 - 关于我们</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4F46E5',
                        secondary: '#10B981'
                    },
                    borderRadius: {
                        'none': '0px',
                        'sm': '2px',
                        DEFAULT: '4px',
                        'md': '8px',
                        'lg': '12px',
                        'xl': '16px',
                        '2xl': '20px',
                        '3xl': '24px',
                        'full': '9999px',
                        'button': '4px'
                    }
                }
            }
        }
    </script>
    <style>
        .fa-icon {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        input[type="number"]::-webkit-outer-spin-button,
        input[type="number"]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
    </style>
</head>
<body class="min-h-[1024px] bg-gray-50 text-gray-800">
    <!-- 顶部导航 -->
    <nav class="fixed top-0 left-0 right-0 bg-white shadow-sm z-50">
        <div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
            <div class="flex items-center space-x-4">
                <a href="#" class="text-gray-700 hover:text-primary transition-colors">
                    <i class="fas fa-arrow-left fa-icon w-6 h-6"></i>
                </a>
                <h1 class="text-xl font-semibold">关于我们</h1>
            </div>
            <div class="flex items-center space-x-6">
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">首页</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">失物招领</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">帮助中心</a>
                <button class="bg-primary text-white px-4 py-2 !rounded-button hover:bg-opacity-90 transition-colors">
                    发布信息
                </button>
            </div>
        </div>
    </nav>

    <main class="pt-24 pb-16 max-w-7xl mx-auto px-6">
        <!-- 平台简介 -->
        <section class="mb-20">
            <div class="flex flex-col md:flex-row items-center gap-12">
                <div class="w-full md:w-1/2">
                    <div class="flex items-center mb-6">
                        <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4">
                            <i class="fas fa-hands-helping fa-icon w-8 h-8 text-primary"></i>
                        </div>
                        <h2 class="font-['Pacifico'] text-3xl text-primary">Lost & Found</h2>
                    </div>
                    <h3 class="text-4xl font-bold mb-6">连接失主与拾获者的桥梁</h3>
                    <p class="text-lg text-gray-600 mb-8 leading-relaxed">
                        校园失物招领平台致力于为全校师生提供高效便捷的失物招领服务。我们通过智能匹配、快速发布和安全的认领流程，帮助失主找回遗失物品，让拾获者能够轻松归还。自2018年成立以来，我们已经成功帮助超过5000件物品回到主人身边。
                    </p>
                    <div class="flex space-x-4">
                        <button class="bg-primary text-white px-6 py-3 !rounded-button hover:bg-opacity-90 transition-colors">
                            立即体验
                        </button>
                        <button class="border border-primary text-primary px-6 py-3 !rounded-button hover:bg-primary hover:bg-opacity-10 transition-colors">
                            了解更多
                        </button>
                    </div>
                </div>
                <div class="w-full md:w-1/2 h-96 rounded-2xl overflow-hidden">
                    <img src="https://ai-public.mastergo.com/ai/img_res/c17e012815c1ab7974264a3dc13a9b48.jpg" 
                         alt="校园失物招领" class="w-full h-full object-cover object-top">
                </div>
            </div>
        </section>

        <!-- 核心功能 -->
        <section class="mb-20">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold mb-4">我们的核心功能</h2>
                <p class="text-lg text-gray-600 max-w-2xl mx-auto">为您提供全方位的失物招领解决方案，让遗失的物品更快回到主人身边</p>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition-shadow">
                    <div class="bg-primary bg-opacity-10 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-6">
                        <i class="fas fa-bullhorn fa-icon w-8 h-8 text-primary"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">失物发布</h3>
                    <p class="text-gray-600">快速发布遗失物品信息，系统自动匹配可能的相关拾获信息</p>
                </div>
                <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition-shadow">
                    <div class="bg-secondary bg-opacity-10 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-6">
                        <i class="fas fa-hand-holding-heart fa-icon w-8 h-8 text-secondary"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">招领信息</h3>
                    <p class="text-gray-600">拾获物品后，可在此发布招领信息，等待失主认领</p>
                </div>
                <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition-shadow">
                    <div class="bg-primary bg-opacity-10 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-6">
                        <i class="fas fa-search fa-icon w-8 h-8 text-primary"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">快速匹配</h3>
                    <p class="text-gray-600">基于AI的智能匹配算法，提高失物与招领信息的匹配准确率</p>
                </div>
                <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition-shadow">
                    <div class="bg-secondary bg-opacity-10 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-6">
                        <i class="fas fa-shield-alt fa-icon w-8 h-8 text-secondary"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">安全认领</h3>
                    <p class="text-gray-600">多重验证机制确保物品安全归还到真正的失主手中</p>
                </div>
            </div>
        </section>

        <!-- 平台数据 -->
        <section class="mb-20 bg-gradient-to-r from-primary to-secondary p-12 rounded-2xl text-white">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold mb-4">平台数据</h2>
                <p class="text-lg opacity-90 max-w-2xl mx-auto">我们用数据说话，见证每一次温暖的归还</p>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                <div class="text-center">
                    <div class="text-5xl font-bold mb-2">5,328</div>
                    <p class="opacity-90">成功找回物品</p>
                </div>
                <div class="text-center">
                    <div class="text-5xl font-bold mb-2">12,456</div>
                    <p class="opacity-90">注册用户数</p>
                </div>
                <div class="text-center">
                    <div class="text-5xl font-bold mb-2">98.7%</div>
                    <p class="opacity-90">用户满意度</p>
                </div>
                <div class="text-center">
                    <div class="text-5xl font-bold mb-2">24</div>
                    <p class="opacity-90">小时响应时间</p>
                </div>
            </div>
        </section>

        <!-- 成功案例 -->
        <section class="mb-20">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold mb-4">成功案例</h2>
                <p class="text-lg text-gray-600 max-w-2xl mx-auto">听听他们如何通过我们的平台找回心爱之物</p>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
                    <div class="h-48 overflow-hidden">
                        <img src="https://ai-public.mastergo.com/ai/img_res/09d7ef15c063f65167c041d37a3df647.jpg" 
                             alt="成功案例" class="w-full h-full object-cover object-top">
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-2">找回的毕业设计</h3>
                        <p class="text-gray-600 mb-4">"在毕业答辩前一天丢失了存有全部设计的笔记本电脑，多亏平台帮我及时找回！"</p>
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-gray-200 overflow-hidden mr-3">
                                <img src="https://ai-public.mastergo.com/ai/img_res/1bdf7d5208728f9626bd818514d6f303.jpg" 
                                     alt="用户头像" class="w-full h-full object-cover">
                            </div>
                            <div>
                                <p class="font-medium">林雨晴</p>
                                <p class="text-sm text-gray-500">计算机学院 大四</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
                    <div class="h-48 overflow-hidden">
                        <img src="https://ai-public.mastergo.com/ai/img_res/e4c7e861334fade6627f7b60454ab7ba.jpg" 
                             alt="成功案例" class="w-full h-full object-cover object-top">
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-2">失而复得的钱包</h3>
                        <p class="text-gray-600 mb-4">"钱包里有身份证和银行卡，本以为找不回来了，没想到第二天就接到平台通知。"</p>
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-gray-200 overflow-hidden mr-3">
                                <img src="https://ai-public.mastergo.com/ai/img_res/5c1294f671fdd266a0fd367dfddf734d.jpg" 
                                     alt="用户头像" class="w-full h-full object-cover">
                            </div>
                            <div>
                                <p class="font-medium">张浩然</p>
                                <p class="text-sm text-gray-500">经济学院 大三</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
                    <div class="h-48 overflow-hidden">
                        <img src="https://ai-public.mastergo.com/ai/img_res/6bb877c921dbf4da52a5b726079417b4.jpg" 
                             alt="成功案例" class="w-full h-full object-cover object-top">
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-2">珍贵的手机相册</h3>
                        <p class="text-gray-600 mb-4">"手机里有和已故奶奶的最后合影，找回的不只是手机，更是无价的回忆。"</p>
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-gray-200 overflow-hidden mr-3">
                                <img src="https://ai-public.mastergo.com/ai/img_res/9734e01a2e3abe8c5007fa91c87f1c88.jpg" 
                                     alt="用户头像" class="w-full h-full object-cover">
                            </div>
                            <div>
                                <p class="font-medium">王思颖</p>
                                <p class="text-sm text-gray-500">文学院 研一</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 联系方式 -->
        <section class="mb-20">
            <div class="flex flex-col lg:flex-row gap-12">
                <div class="w-full lg:w-1/2">
                    <h2 class="text-3xl font-bold mb-6">联系我们</h2>
                    <p class="text-lg text-gray-600 mb-8 leading-relaxed">
                        如果您有任何问题或建议，欢迎通过以下方式与我们取得联系。我们的客服团队将在24小时内回复您。
                    </p>
                    <div class="space-y-6">
                        <div class="flex items-start">
                            <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4">
                                <i class="fas fa-phone-alt fa-icon w-6 h-6 text-primary"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-lg mb-1">客服电话</h3>
                                <p class="text-gray-600">400-888-1234</p>
                                <p class="text-sm text-gray-500">工作日 9:00-18:00</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4">
                                <i class="fas fa-envelope fa-icon w-6 h-6 text-primary"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-lg mb-1">官方邮箱</h3>
                                <p class="text-gray-600">service@lostfound.edu.cn</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4">
                                <i class="fab fa-weixin fa-icon w-6 h-6 text-primary"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-lg mb-1">微信公众号</h3>
                                <p class="text-gray-600">搜索"校园失物招领"</p>
                                <div class="mt-2 w-32 h-32 bg-white p-2 rounded border border-gray-200">
                                    <img src="https://ai-public.mastergo.com/ai/img_res/5834f25ecd08b8aa1fc7b5cc1ff98645.jpg" 
                                         alt="微信公众号二维码" class="w-full h-full object-contain">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="w-full lg:w-1/2 bg-white p-8 rounded-xl shadow-sm">
                    <h3 class="text-xl font-semibold mb-6">反馈建议</h3>
                    <form>
                        <div class="mb-4">
                            <label for="name" class="block text-sm font-medium text-gray-700 mb-1">您的姓名</label>
                            <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded focus:ring-primary focus:border-primary">
                        </div>
                        <div class="mb-4">
                            <label for="email" class="block text-sm font-medium text-gray-700 mb-1">电子邮箱</label>
                            <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded focus:ring-primary focus:border-primary">
                        </div>
                        <div class="mb-4">
                            <label for="message" class="block text-sm font-medium text-gray-700 mb-1">留言内容</label>
                            <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded focus:ring-primary focus:border-primary"></textarea>
                        </div>
                        <button type="submit" class="bg-primary text-white px-6 py-3 w-full !rounded-button hover:bg-opacity-90 transition-colors">
                            提交反馈
                        </button>
                    </form>
                </div>
            </div>
        </section>

        <!-- 团队介绍 -->
        <section class="mb-20">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold mb-4">我们的团队</h2>
                <p class="text-lg text-gray-600 max-w-2xl mx-auto">一群热爱校园、热心助人的年轻人</p>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                <div class="bg-white p-6 rounded-xl shadow-sm text-center">
                    <div class="w-32 h-32 rounded-full mx-auto mb-4 overflow-hidden border-4 border-white shadow">
                        <img src="https://ai-public.mastergo.com/ai/img_res/a34e728f26cad202475d3ed49618959a.jpg" 
                             alt="团队成员" class="w-full h-full object-cover">
                    </div>
                    <h3 class="text-xl font-semibold mb-1">赵雅婷</h3>
                    <p class="text-secondary mb-2">产品经理</p>
                    <p class="text-gray-600 text-sm">"希望通过技术让校园更温暖"</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-sm text-center">
                    <div class="w-32 h-32 rounded-full mx-auto mb-4 overflow-hidden border-4 border-white shadow">
                        <img src="https://ai-public.mastergo.com/ai/img_res/1cd2250d7411b22b635208a601dd76a1.jpg" 
                             alt="团队成员" class="w-full h-full object-cover">
                    </div>
                    <h3 class="text-xl font-semibold mb-1">陈宇航</h3>
                    <p class="text-secondary mb-2">技术负责人</p>
                    <p class="text-gray-600 text-sm">"用代码搭建信任的桥梁"</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-sm text-center">
                    <div class="w-32 h-32 rounded-full mx-auto mb-4 overflow-hidden border-4 border-white shadow">
                        <img src="https://ai-public.mastergo.com/ai/img_res/30a590aef99dd4e474dd4d8d20a799c1.jpg" 
                             alt="团队成员" class="w-full h-full object-cover">
                    </div>
                    <h3 class="text-xl font-semibold mb-1">李梦琪</h3>
                    <p class="text-secondary mb-2">运营主管</p>
                    <p class="text-gray-600 text-sm">"每一次成功匹配都让我感动"</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-sm text-center">
                    <div class="w-32 h-32 rounded-full mx-auto mb-4 overflow-hidden border-4 border-white shadow">
                        <img src="https://ai-public.mastergo.com/ai/img_res/22d5be51c386c5224f127cdf8f487072.jpg" 
                             alt="团队成员" class="w-full h-full object-cover">
                    </div>
                    <h3 class="text-xl font-semibold mb-1">吴子轩</h3>
                    <p class="text-secondary mb-2">设计总监</p>
                    <p class="text-gray-600 text-sm">"设计应该服务于真实的需求"</p>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-100 py-12">
        <div class="max-w-7xl mx-auto px-6">
            <div class="flex flex-col md:flex-row justify-between items-center mb-8">
                <div class="flex items-center mb-6 md:mb-0">
                    <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4">
                        <i class="fas fa-hands-helping fa-icon w-8 h-8 text-primary"></i>
                    </div>
                    <h2 class="font-['Pacifico'] text-2xl text-primary">Lost & Found</h2>
                </div>
                <div class="flex space-x-6">
                    <a href="#" class="text-gray-600 hover:text-primary transition-colors">关于我们</a>
                    <a href="#" class="text-gray-600 hover:text-primary transition-colors">使用条款</a>
                    <a href="#" class="text-gray-600 hover:text-primary transition-colors">隐私政策</a>
                    <a href="#" class="text-gray-600 hover:text-primary transition-colors">帮助中心</a>
                </div>
            </div>
            <div class="border-t border-gray-200 pt-8 flex flex-col md:flex-row justify-between items-center">
                <p class="text-gray-500 mb-4 md:mb-0">© 2023 校园失物招领平台 版权所有</p>
                <div class="flex space-x-4">
                    <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                        <i class="fab fa-weibo fa-icon w-6 h-6"></i>
                    </a>
                    <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                        <i class="fab fa-weixin fa-icon w-6 h-6"></i>
                    </a>
                    <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                        <i class="fab fa-qq fa-icon w-6 h-6"></i>
                    </a>
                    <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                        <i class="fab fa-github fa-icon w-6 h-6"></i>
                    </a>
                </div>
            </div>
            <div class="mt-4 text-center md:text-left">
                <p class="text-sm text-gray-500">备案号：京ICP备12345678号-1</p>
                <p class="text-sm text-gray-500">当前版本：v2.5.1</p>
            </div>
        </div>
    </footer>
</body>
</html>